<template>
  <div class="agent-container">
    <div class="operator">
      <input ref="inputRef" v-model="state.imgUrl" class="input" spellcheck="false" placeholder="请输入图片URL" />
      <button type="button" @click="renderImg">打印</button>
      <button type="button" @click="state.renderText = ''">清空</button>
    </div>
    <div class="agent-content">
      <pre class="img-box">{{ state.renderText }}</pre>
    </div>
  </div>
</template>
<script setup>
import { reactive } from 'vue';
import { renderAsciiFromUrl, streamText } from '@/aiw-agent/src/utils/tools';

const state = reactive({
  imgUrl: '',
  imgText: '',
  renderText: ''
})
const renderImg = async () => {
  const url = state.imgUrl.trim();
  if (!url) return;
  state.imgText = await renderAsciiFromUrl({
    url: url,
    maxWidth: 100,
    charsIndex: 1
  });
  streamText(state.imgText, (chunk) => {
    // console.log("流输出：", chunk);
    state.renderText += chunk;
}, 50, 100);
}
</script>
<style lang="scss" scoped>
.agent-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  box-sizing: border-box;
  .operator {
    display: flex;
    align-items: center;
    gap: 8px;
    .input {
      padding: 8px 16px;
      border-radius: 4px;
      border: 1px solid #ddd;
      box-sizing: border-box;
    }
  }
  .agent-content {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .img-box {
    font-family: monospace;
    font-size: 10px;
    line-height: 0.7;
    letter-spacing: 0;
    white-space: pre;
    border: 1px solid #ddd;
    min-height: 300px;
    margin-bottom: 400px;
  }
}
</style>